<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="pragma" content="no-cache"> 
		<meta http-equiv="expires" content="Tue, 01 Jan 2017 00:00:00 GMT"> 
		<meta http-equiv="expires" content="0"> 
		<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description" content="">
		<meta name="author" content="">
	    <link rel="icon" href="images/ico/fav.ico" mce_href="images/ico/fav.ico" type="image/x-icon">  
	    <link rel="shortcut icon" href="images/ico/fav.ico" mce_href="images/ico/fav.ico" type="image/x-icon">
		<title>Renda - clean blog theme based on Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- Custom styles for this template -->
		<!-- <link href="css/jquery.bxslider.css" rel="stylesheet"> -->
	    	<link href="css/owl.carousel.css" rel="stylesheet">
	    	<link href="css/owl.transitions.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<!-- Navigation -->
		<!-- <nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
				</div>
				<div id="navbar" class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="index.html">Home</a></li>
						<li><a href="#about">Lifestyle</a></li>
						<li><a href="#contact">Travel</a></li>
						<li><a href="#contact">Fashion</a></li>
						<li><a href="about.html">About Me</a></li>
						<li><a href="about.html">Contact</a></li>
					</ul>

					<ul class="nav navbar-nav navbar-right">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-instagram"></i></a></li>
						<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
						<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
						<li><a href="#"><i class="fa fa-reddit"></i></a></li>
					</ul>

				</div>
			</div>
		</nav> -->

	    <header id="header">
	        <nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
	            <div class="container">
	                <div class="navbar-header">
	                    <!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	                        <span class="sr-only">Toggle navigation</span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                    </button> -->
	                    <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
	                </div>
					
	                <div class="collapse navbar-collapse navbar-right">
	                    <ul class="nav navbar-nav">	                        
	                        <li class="scroll"><a href="./index.html#home">首页</a></li>
	                        <!-- <li class="scroll"><a href="#features">Features</a></li> -->
	                        <li class="scroll"><a href="./index.html#services">服务</a></li>
	                        <li class="scroll"><a href="./index.html#portfolio">案例</a></li>
	                        <li class="scroll"><a href="./index.html#about">关于</a></li>
	                        <li class="scroll"><a href="./index.html#meet-team">团队</a></li>
	                        <!-- <li class="scroll"><a href="#pricing">Pricing</a></li> -->
	                        <li class="scroll active"><a href="./blogs.html">博客</a></li> 
	                        <li class="scroll"><a href="./index.html#get-in-touch">联系方式</a></li>                       
	                    </ul>
	                </div>
	            </div><!--/.container-->
	        </nav><!--/nav-->
	    </header><!--/header-->

		<section id="main-slider">	        
	        <div class="owl-carousel">
	            <div class="item" style="background-image: url(images/slider/bg1.jpg);">
	                <div class="slider-inner">
	                    <div class="container">
	                        <div class="row">
	                            <div class="col-sm-6">
	                                <div class="carousel-content">
	                                    <h2><span>Multi</span> is the best Onepage html template</h2>
	                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  dolore magna incididunt ut labore aliqua. </p>
	                                    <a class="btn btn-primary btn-lg" href="#">Read More</a>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div><!--/.item-->
	             <div class="item" style="background-image: url(images/slider/bg2.jpg);">
	                <div class="slider-inner">
	                    <div class="container">
	                        <div class="row">
	                            <div class="col-sm-6">
	                                <div class="carousel-content">
	                                    <h2>Beautifully designed <span>free</span> one page template</h2>
	                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et  dolore magna incididunt ut labore aliqua. </p>
	                                    <a class="btn btn-primary btn-lg" href="#">Read More</a>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div><!--/.item-->
	        </div><!--/.owl-carousel-->
		</section>

		<div class="container">
		<section id="blogs">
			<div class="row container">
				<!-- 左侧列表 Start -->
				<div class="col-md-8" id="list">
					<!-- article -->
					<article class="blog-post" style="display:none;">
						<div class="blog-post-image">
							<a href=""><img src="" alt=""></a>
						</div>
						<div class="blog-post-body">
							<h2><a href=""></a></h2>
							<div class="post-meta"><span>by <a href="#"></a></span>/<span><i class="fa fa-clock-o"></i></span><!-- /<span><i class="fa fa-comment-o"></i> <a href="#">343</a></span> --></div>
							<p></p>
							<div class="read-more"><a href="#">Continue Reading</a></div>
						</div>
					</article>
				</div>
				<!-- 左侧列表 End -->


				<!-- 右侧边栏 Start -->
				<div class="col-md-4 sidebar-gutter">
					<aside>
					<!-- sidebar-widget -->
					<div class="sidebar-widget">
						<h3 class="sidebar-title">我</h3>
						<div class="widget-container widget-about">
							<a href="post.html"><img src="images/blog/author.jpg" alt=""></a>
							<h4>老王</h4>
							<!-- <div class="author-title">Designer</div> -->
							<p>嘿，我是老王，一个码工，编龄6、7年，项目十来个。虽已步入不惑之年，然环顾四周，家徒四壁。为补家用，特成立此室，以盈客八方，结友朋五湖。</p>
						</div>
					</div>
					<!-- sidebar-widget -->
					<div class="sidebar-widget">
						<h3 class="sidebar-title">精选发布</h3>
						<div class="widget-container" id="choice">
							<article class="widget-post">
								<div class="post-image">
									<a href=""><img src="" alt=""></a>
								</div>
								<div class="post-body">
									<h2><a href=""></a></h2>
									<div class="post-meta">
										<span>by <a href="#"></a></span> /   <span><i class="fa fa-clock-o"></i> </span> <!-- <span><a href="post.html"><i class="fa fa-comment-o"></i> 23</a></span> -->
									</div>
								</div>
							</article>
						</div>
					</div>
					<!-- sidebar-widget -->
					<!-- <div class="sidebar-widget">
						<h3 class="sidebar-title">Socials</h3>
						<div class="widget-container">
							<div class="widget-socials">
								<a href="#"><i class="fa fa-facebook"></i></a>
								<a href="#"><i class="fa fa-twitter"></i></a>
								<a href="#"><i class="fa fa-instagram"></i></a>
								<a href="#"><i class="fa fa-google-plus"></i></a>
								<a href="#"><i class="fa fa-dribbble"></i></a>
								<a href="#"><i class="fa fa-reddit"></i></a>
							</div>
						</div>
					</div> -->
					<!-- sidebar-widget -->
					<div class="sidebar-widget" id="category">
						<h3 class="sidebar-title">博客分类</h3>
						<div class="widget-container">
							<ul>
								<!-- <li><a href="">工作室</a></li>
								<li><a href="#">项目</a></li>
								<li><a href="#">行业</a></li>
								<li><a href="#">编码</a></li>
								<li><a href="#">设计</a></li>
								<li><a href="#">杂谈</a></li>
								<li><a href="#">未分类</a></li> -->
							</ul>
						</div>
					</div>
					</aside>
				</div>
				<!-- 右侧边栏 End -->
			</div>
		</section>
		</div> <!-- /.container -->

		<footer class="footer">

			<div class="footer-socials">
				<a href="#"><i class="fa fa-facebook"></i></a>
				<a href="#"><i class="fa fa-twitter"></i></a>
				<a href="#"><i class="fa fa-instagram"></i></a>
				<a href="#"><i class="fa fa-google-plus"></i></a>
				<a href="#"><i class="fa fa-dribbble"></i></a>
				<a href="#"><i class="fa fa-reddit"></i></a>
			</div>

			<div class="footer-bottom">
				<i class="fa fa-copyright"></i> 2017 老王的BAM工作室
			</div>
		</footer>

		<!-- Bootstrap core JavaScript
			================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
    	<script src="js/owl.carousel.min.js"></script>
		<!-- <script src="js/jquery.bxslider.js"></script>
		<script src="js/mooz.scripts.min.js"></script> -->

		<script>
			/********** 获取URL中参数值 Start **********/
			function GetQueryString(name){
			     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			     var r = window.location.search.substr(1).match(reg);
			     if(r!=null) 
			     	return unescape(r[2]); 
			     else
			     	return null;
			} 
			/********** 获取URL中参数值 End **********/
		</script>

		<script>	
		$(document).ready(function() {

			/********** Slider Start **********/
			var time = 7; // time in seconds

		 	var $progressBar,
		      $bar, 
		      $elem, 
		      isPause, 
		      tick,
		      percentTime;
		 
		    //Init the carousel
		    $("#main-slider").find('.owl-carousel').owlCarousel({
		      slideSpeed : 500,
		      paginationSpeed : 500,
		      singleItem : true,
		      navigation : true,
				navigationText: [
				"<i class='fa fa-angle-left'></i>",
				"<i class='fa fa-angle-right'></i>"
				],
		      afterInit : progressBar,
		      afterMove : moved,
		      startDragging : pauseOnDragging,
		      //autoHeight : true,
		      transitionStyle : "fadeUp"
		    });

			//Init progressBar where elem is $("#owl-demo")
		    function progressBar(elem){
		      $elem = elem;
		      //build progress bar elements
		      buildProgressBar();
		      //start counting
		      start();
		    }
		 
		    //create div#progressBar and div#bar then append to $(".owl-carousel")
		    function buildProgressBar(){
		      $progressBar = $("<div>",{
		        id:"progressBar"
		      });
		      $bar = $("<div>",{
		        id:"bar"
		      });
		      $progressBar.append($bar).appendTo($elem);
		    }
		 
		    function start() {
		      //reset timer
		      percentTime = 0;
		      isPause = false;
		      //run interval every 0.01 second
		      tick = setInterval(interval, 10);
		    };
		 
		    function interval() {
		      if(isPause === false){
		        percentTime += 1 / time;
		        $bar.css({
		           width: percentTime+"%"
		         });
		        //if percentTime is equal or greater than 100
		        if(percentTime >= 100){
		          //slide to next item 
		          $elem.trigger('owl.next')
		        }
		      }
		    }
		 
		    //pause while dragging 
		    function pauseOnDragging(){
		      isPause = true;
		    }
		 
		    //moved callback
		    function moved(){
		      //clear interval
		      clearTimeout(tick);
		      //start again
		      start();
		    }
		    /********** Slider End **********/

		    /********** List Start **********/
		   	var cat = GetQueryString("class");
		   	//博客列表中item模板
		   	var tmp = $("#list").children().first();
		   	tmp.hide();
		   	//精选发布中item模板
		   	var tmp2 = $("#choice").children().first();
		   	tmp2.hide();
		   	var art = null;
		   	$.getJSON("./blogs/list.json?_="+(new Date().getTime()), function(json){
		   		//右侧博客分类
		   		$.each(json.class,function(i,n){
		   			$("#category")
		   			.find("ul")
		   			.append("<li><a href='./blogs.html?class="+i+"'>"+n+"</a></li>");
		   		});	
		   		//中间博客列表 与 右侧精选发布
		   		$.each(json.blogs,function(i,n){
			   		//博客列表
		   			if(n.class==cat || (cat==null || cat=="" || cat==undefined)){
			   			art = $(tmp).clone().appendTo("#list").show();
			   			//设置图片
			   			$(art).children(".blog-post-image").find("img").attr("src", "./blogs/mimg/"+n.mimg);
			   			//设置URL
			   			$(art).children(".blog-post-body").find("a").attr("href", n.href);
			   			//设置标题
			   			$(art).children(".blog-post-body").find("h2 > a").html(n.title);
			   			//设置作者
			   			$(art).find(".blog-post-body > .post-meta").find("a:first").html(n.author);
			   			//设置发布时间
			   			$(art).find(".blog-post-body > .post-meta").find("i:first").after(n.time);
			   			//设置简介内容
			   			$(art).children(".blog-post-body").find("p").html(n.intro);
		   			}

		   			//精选发布
		   			if(n.featured=="1"){
		   				art = $(tmp2).clone().appendTo("#choice").show();
			   			//设置图片
			   			$(art).children(".post-image").find("img").attr("src", "./blogs/simg/"+n.simg);
			   			//设置URL
			   			$(art).children(".post-body").find("a").attr("href", n.href);
			   			//设置标题
			   			$(art).children(".post-body").find("h2 > a").html(n.title);
			   			//设置作者
			   			$(art).find(".post-body > .post-meta").find("a:first").html(n.author);
			   			//设置发布时间
			   			$(art).find(".post-body > .post-meta").find("i:first").after(n.time);
			   			//设置简介内容
			   			$(art).children(".post-body").find("p").html(n.intro);
		   			}
		   		});	   		
			});
		    /********** List End **********/

		});
		</script>
	</body>
</html>
